<template>
  <div class="parting-box flex">
    <div class="reset-box pointer" @click="resetTimer"><em>重置</em></div>
    <ul class="day-box">
      <li v-for="(item,index) in list" :key="item+'day'"> {{ item }}</li>
    </ul>
    <div id="parting-main" ref="parting-main" class="parting-main">
      <ul @mousedown.left.stop="handleMouserDownLeft">
        <li v-for="(item,index) in list" :key="item" class="flex">
          <el-checkbox-group v-model="timer" size="small" @change="handleChange">
            <el-checkbox-button
              v-for="(v,i) in 24"
              :key="handlerComputedKey(index,i)"
              :label="handlerComputedKey(index,i)"
              class="check-box"
              :data-key="handlerComputedKey(index,i)"
            >{{ i }}</el-checkbox-button>
          </el-checkbox-group>
        </li>
      </ul>
      <div v-show="maskShow" class="mask" :style="{top:getTop,left:getLeft, width:getWidth,height:getHeight}"></div>
    </div>

    <div class="sec-box flex">
      <template v-for="(item,index) in 5">

        <p>{{ index*6===24?23:index*6 }}</p>
      </template>

    </div>

    <!-- <div style="position: absolute;bottom: -10px; left: 0px;">
      <span>getTop:{{ getTop }}</span>
      <span>getLeft:{{ getLeft }}</span>
      <span>getWidth:{{ getWidth }}</span>
      <span>getHeight:{{ getHeight }}</span>
      <div>
        <span>start_x:{{ start_x }}</span>
        <span>start_y:{{ start_y }}</span>
        <span>end_x:{{ end_x }}</span>
        <span>end_y:{{ end_y }}</span>
      </div>
    </div> -->

  </div>
</template>
<script>
export default {
  name: '', // ·������
  model: {
    prop: 'value',
    event: 'change'
  },

  props: {
    value: {
      type: Object,
      default: function() {
        return []
      }
    }
  },

  data() {
    return {
      list: ['日', '一', '二', '三', '四', '五', '六'],
      timer: [], // 选中的时间组
      maskShow: false, // 遮罩层显示
      mouseStopTimer: undefined, // 定时器
      mouseType: 'add',
      /* 鼠标点击初始位置*/
      start_x: 0,
      start_y: 0,
      /* 鼠标点击停止位置*/
      end_x: 0,
      end_y: 0
    }
  },
  computed: {
    getTop() {
      const box = document.querySelector('.parting-main')
      const top = box && box.getBoundingClientRect() ? box.getBoundingClientRect().top : 0
      let num = (Math.min(this.start_y, this.end_y)) - top

      num = num < 0 ? 0 : num
      return num + 'px'
    },
    getLeft() {
      const box = document.querySelector('.parting-main')
      const left = box && box.getBoundingClientRect() ? box.getBoundingClientRect().left : 0
      let num = (Math.min(this.start_x, this.end_x)) - left
      num = num < 0 ? 0 : num
      return num + 'px'
    },
    getWidth() {
      return `${Math.abs(this.end_x - this.start_x)}px`
    },
    getHeight() {
      return `${Math.abs(this.end_y - this.start_y)}px`
    }
  },
  watch: {
    value: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        this.timer = newV
      }
    }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    handleChange(val) {
      this.$emit('change', val)
    },

    resetTimer() {
      this.$emit('change', [])
    },
    // 计算每个选择框的key的值
    handlerComputedKey(day, time) {
      if (day === 0) {
        return time
      } else {
        return time + day * 24
      }
    },

    /* 点击了鼠标左键*/
    handleMouserDownLeft(event) {
      if (!this.timer.length) {
        this.mouseType = 'add'
      } else {
        const key = event.target.parentNode.getAttribute('data-key')
        if (this.timer.indexOf(key * 1) < 0) {
          this.mouseType = 'add'
        } else {
          this.mouseType = 'del'
        }
      }
      this.maskShow = false
      clearTimeout(this.mouseStopTimer)
      // 监听鼠标移动事件和鼠标弹起事件
      document.body.addEventListener('mouseup', this.handleMouseUp)
      /* 设置定时器 */
      this.mouseStopTimer = setTimeout(() => {
        this.maskShow = true
        // 鼠标有效区域的值
        this.start_x = event.clientX
        this.start_y = event.clientY
        document.body.addEventListener('mousemove', this.handleMouseMove)
      }, 300) // 间隔300毫秒后执行，判定这时候鼠标左键被按住不放
    },
    /* 鼠标移动事件*/
    handleMouseMove(event) {
      // 如果并非框选开启，退出
      if (!this.maskShow) return false
      this.end_x = event.clientX
      this.end_y = event.clientY
    },

    /* 鼠标弹起事件 */
    handleMouseUp() {
      clearTimeout(this.mouseStopTimer)
      // 监听鼠标移动事件和鼠标弹起事件
      document.body.removeEventListener('mousemove', this.removeMouseMove())
      document.body.removeEventListener('mouseup', this.removeMouseUp())
      if (!this.maskShow) return this.resSetXY()
      this.maskShow = false
      this.handleDomSelect()
      this.resSetXY()
    },
    handleDomSelect() {
      const dom_mask = window.document.querySelector('.mask')
      const rect_select = dom_mask.getClientRects()[0]
      const eleArr = document.querySelectorAll('.check-box')
      const checkArr = []
      const delArr = []
      eleArr.forEach((node, index) => {
        const rects = node.getClientRects()[0]
        const flag = this.collide(rects, rect_select)
        if (flag) {
          const key = node.getAttribute('data-key') * 1
          checkArr.push(key)
          /* if (this.timer.indexOf(key) === -1) {
                   checkArr.push(key)
                 } else {
                   delArr.push(key)
                 } */
        }
      })

      // const timeArr = [...this.timer, ...checkArr]
      // this.timer = timeArr.filter(item => {
      //   return delArr.indexOf(item) === -1
      // })

      if (this.mouseType === 'add') {
        this.timer = [...this.timer, ...checkArr]
      } else {
        this.timer = this.timer.filter(item => {
          return checkArr.indexOf(item) === -1
        })
      }
      this.handleChange(this.timer)
    },

    collide(rect1, rect2) {
      const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width)
      const maxY = Math.max(
        rect1.y + rect1.height,
        rect2.y + rect2.height
      )
      const minX = Math.min(rect1.x, rect2.x)
      const minY = Math.min(rect1.y, rect2.y)
      if (
        maxX - minX <= rect1.width + rect2.width &&
          maxY - minY <= rect1.height + rect2.height
      ) {
        return true
      } else {
        return false
      }
    },
    resSetXY() {
      this.start_x = 0
      this.start_y = 0
      this.end_x = 0
      this.end_y = 0
    },
    removeMouseMove() {
      // alert('取消鼠标移动监听了')
    },
    removeMouseUp() {
      // alert('取消监听鼠标弹起了')
    }

  }
}
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";

  .sec-box {
    position: absolute;
    bottom: -28px;
    left: 34px;
    width: 424px;

    p {
      font-size: 12px;
      position: relative;
      &:nth-of-type(2){
       left: 8px;
      }
      &:nth-of-type(3){
       left: 16px;
      }
      &:nth-of-type(4){
       left: 18px;
      }
    }
  }

  .mask {
    position: absolute;
    border: 1px solid $mainColor1;
    background-color: rgba($color: #24BEBE, $alpha: 0.5);
  }

  .parting-box .day-box {
    width: 20px;

    li {

      width: 20px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }
  }

  .parting-box {
    justify-content: flex-start;

    .parting-main {
      padding-left: 10px;
      width: auto;
      height: auto;
      position: relative;
    }

    ul {
      overflow: hidden;
      width: 440px;
      position: relative;

      li {
        width: 440px;
        justify-content: flex-start;
        position: relative;

        /deep/ .el-checkbox-group {
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .el-form label {
            width: 18px;
            height: 24px;
          }

          .el-form-item--small .el-form-item__content,
          .el-form-item--small .el-form-item__label {
            line-height: 24px;
          }

          .el-checkbox-button.is-checked .el-checkbox-button__inner {
            background-color: $mainColor1;
            box-shadow: none;
            border-color: $mainColor1;
            color: #FFFFFF;
          }

          .el-checkbox-button__inner {
            padding: 0 2px !important;
            width: 18px;
            height: 24px;
            line-height: 22px;
            font-size: 11px;
            border-radius: 0 !important;
            border-top: none;
            border-right: 0;
            border-left: 0;
            color: #FFFFFF;

            &:hover {
              color: $mainColor1;
            }
          }
        }
      }
    }
  }

  .reset-box{
    padding: 4px;
    position: absolute;
    top: -38px;
    right: 24px;

  }
</style>
